<template>
  <div class="divBox">
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form :inline="true" :model="search" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="search.packet_name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="红包类型">
              <el-select v-model="search.packet_attr_type" filterable clearable placeholder="状态">
                <el-option label="满减" value="1"></el-option>
                <!-- <el-option label="免运费" value="2"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchQuery" icon="el-icon-search">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" class="el-icon-plus" @click="edit({})">红包</el-button>
      </div>
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
        <el-table-column prop="red_packet_id" label="ID" width="80"></el-table-column>
        <el-table-column prop="packet_name" label="红包名称"></el-table-column>
        <el-table-column prop="packet_name" label="红包类型">
          <template slot-scope="d">
            <div v-for="item in redType" v-if="d.row.packet_type == item.id">{{item.title}}</div>
          </template>
        </el-table-column>

        <el-table-column prop="packet_condition" label="使用条件">
          <template slot-scope="d">
            <div v-if="d.row.packet_condition > 0">订单满{{d.row.packet_condition}}元可用</div>
            <div v-else>无门槛</div>
          </template>
        </el-table-column>
        <el-table-column prop="get_num" label="已领取数量"></el-table-column>
        <el-table-column prop="packet_term" label="领取后有效期[天]">
          <template slot-scope="d">
            <div v-if="d.row.packet_term == 0">不限期</div>
            <div v-else>{{d.row.packet_term}}天</div>
          </template>
        </el-table-column>
        <el-table-column prop="use_intro" label="使用说明"></el-table-column>

        <el-table-column prop="packet_condition" label="状态">
          <template slot-scope="d">
            <div v-if="d.row.status== 1">启用</div>
            <div v-else-if="d.row.status== 0">关闭</div>
            <div v-else>删除</div>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="search.page"
          :page-sizes="[15, 25, 35, 45]" :page-size="search.limit" layout="total, sizes, prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
      <!-- 弹出编辑区域 -->
      <el-dialog title="编辑" :visible.sync="editDialogVisible" width="60%">

        <el-form :model="editData" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="红包名称">
            <el-input v-model="editData.packet_name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="红包类型">
            <el-select v-model="editData.packet_attr_type" filterable clearable placeholder="类型">
              <el-option label="满减" :value="1"></el-option>
              <el-option label="免运费" :value="2"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="满减金额">
            <el-input-number v-model="editData.packet_condition" :min='0' placeholder='订单满多少元可用'></el-input-number>
          </el-form-item>
          <el-form-item label="红包总金额">
            <el-input-number v-model="editData.packet_value" :min='1' placeholder='红包总金额'></el-input-number>
          </el-form-item>
          <el-form-item label="限期(天)">
            <el-input-number v-model="editData.packet_term" placeholder='获得后多久失效' :min='0'></el-input-number>
          </el-form-item>
          <el-form-item label="平台总发放量">
            <el-input-number v-model="editData.packet_num" :min='0' placeholder='总发放数量0为不限量'></el-input-number>

          </el-form-item>
          <el-form-item label="使用说明">
            <el-input v-model="editData.use_intro" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch v-model="editData.status" active-color="#13ce66" inactive-color="#ff4949" active-text="开启"
              inactive-text="关闭" :active-value="1" :inactive-value="0">
            </el-switch>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {
    redListApi,
    redSaveEditApi
  } from '@/api/red.js'

  export default {
    data() {
      return {
        editData: {},
        search: {
          limit: 15,
          page: 0
        },
        receivingType: [ //领取条件
          {
            id: 1,
            title: '会员等级'
          },
          {
            id: 2,
            title: '分销等级'
          }
        ],
        redType: [{
            id: 9,
            title: '新手分销红包(通过邀请第一次进入小程序)', //第一次进入时，被邀请进来的
          }, {
            id: 11,
            title: '普通新人开机红包（自动发放）' // 新人进入时弹窗红包
          }, {
            id: 10,
            title: '新人开机红包(弹窗领取)' //此红包为新人第一次进入，弹窗领取
          }, {
            id: 3,
            title: '普通新手红包(非邀请第一次进入小程序)' //第一次进入时，不是邀请进来的
          }, {
            id: 4,
            title: '开机红包（指定领取限定）' //普通开机红包
          },
          {
            id: 5,
            title: "plus会员红包"
          },
          {
            id: 8,
            title: "领券中心红包"
          },
          {
            id: 7,
            title: "亲友团助力红包"
          }, {
            id: 6,
            title: "合体开大奖红包"
          }, {
            id: 12,
            title: "充值1年会员，附赠亲友卡"
          }

        ],
        redGiftType: [{
          id: 1,
          title: '满减',
        }, {
          id: 2,
          title: '免运费',
        }],
        count: 0,
        tableData: [],
        tableLoading: false, //设置table加载动画
        editDialogVisible: false, //编辑弹出
        rules: {},
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      searchQuery() {
        this.search.page = 0
        this.getList()
      },
      getList() {
        this.tableLoading = true
        redListApi(this.search).then(res => {
          this.search.limit = res.data.per_page
          this.search.page = res.data.current_page
          this.count = res.data.total
          this.tableData = res.data.data
          this.tableLoading = false
        }).catch(err => {
          this.$message.error(err.message);
          this.tableLoading = false;
        })
      },
      save() { // insert  update

        redSaveEditApi(this.editData).then(res => {
          // this.editData = {}
          this.getList()
          this.editDialogVisible = false
          // this.$message('编辑成功')
        }).catch(err => {
          this.$message.error(err.message)
        })


      },
      del(row) {
        let This = this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //请求接口删除数据

          redSaveEditApi({
            red_packet_id: row.red_packet_id,
            status: -1
          }).then(res => {
            This.$message({
              type: 'success',
              message: '删除成功!'
            });
            This.getList()
          }).catch(err => {
            This.$message({
              type: 'error',
              message: '删除失败!'
            });
          })


        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
      },
      edit(data) {
        this.editDialogVisible = true
        this.editData = JSON.parse(JSON.stringify(data))
        console.log(data)
      },
      handleSizeChange(val) {
        this.search.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.search.page = val
        this.getList()
      }
    }
  }
</script>

<style>
</style>
